<%--
  Created by IntelliJ IDEA.
  User: taohj
  Date: 2014/6/29
  Time: 18:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<c:set var="dashboardMenuTag" value="myOrg" scope="request"></c:set>

<!Doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <title>政府数据开放平台</title>
    <jsp:include page="../../commons/include.jsp"/>

    <link href="/resources/css/lib.css" rel="stylesheet">


    <style>


        a {
            text-decoration: none;
        }

        * {
            font-family: '宋体';
        }

        .filter {
            width: 150px;
            float: left;
            min-height: 500px;
            padding: 0px 6px;

        }

        .filter div:last-of-type {
            margin-top: 0px;
        }

        .filter .title {
            height: 26px;
            background: #cccccc;
            padding: 4px 8px;
            font-size: 16px;
            font-weight: bold
        }

        .filter .content {
            padding-left: 10px;
        }

        .filter .content ul {
            list-style: none
        }

        .filter .content ul li {
            height: 26px background-image : url('/resource/images/app/bg-app.png');
        }

        .filter .content ul li input[type=checkbox] {
            height: 16px;
            width: 16px;
            margin-top: 4px
        }

        .list {

            width: 800px;
            margin: 0 auto 0 auto;
        }

        .list li {
            width: 260px;
            height: 180px;
            list-style: none;
            float: left;
            margin: 4px 0 0 4px;

            cursor: pointer

        }

        .list > li > div > div {
            padding-left: 30px;;
        }


        #dialog{
            line-height: 24px;;
        }

        #dialog>div:last-of-type>div{
            padding-left: 20px;
        }

        #dialog>div:last-of-type>div>span:first-of-type{
            font-size: 14px;
            font-weight: bold;
        }



    </style>

    <script>
        $(function () {
            $('.orgList_ul a').each(function (index) {
                //alert($(this).html());
            });

            $('#main .list  li').each(function () {
                $(this).on('click', function () {
                    $('#appDetail').modal({remote: '/front/app/detail?id=' + $(this).attr('appid')});


                });
            });


            $("select[name='order']").on('change', function () {
                $('#main form').submit();
            });

            $("#appDetail").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });

            $( "#dialog" ).dialog({
                autoOpen: false,
                modal:true,
                resizable:false,
                width: 420
               /* buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]*/
            });



         /*   <div id="dialog" style="width: 400px">
                    <div style="width: 80px;float: left;"><img src="" width="80" height="80"></div>
            <div style="width: 300px;float: left;">
                    <div style="width: 300px;"><span name="title">腾讯QQ</span></div>
            <div style="width: 300px;">&nbsp;&nbsp;<span name="description"></span></div>
            <div style="width: 300px;"><span>系统平台：</span><span name="platform"></span></div>
            <div style="width: 300px;"><span>主题：</span><span name="theme"></span></div>
            <div style="width: 300px;"><span>标签：</span><span name="tag"></span></div>
            <div style="width: 300px;"><span>下载：</span><span name="url"></span></div>
            </div>
            </div>*/


            $( ".list li" ).click(function( event ) {


                var id=$(this).attr("app");
                var dialog=$( "#dialog" );
                $.post("/front/front/app/view", { id: id},function(app){
                    dialog.find("span[name=title]").html(app.name);
                    dialog.find("span[name=description]").html(app.description);
                    dialog.find("span[name=platform]").html(app.platform.name);
                    dialog.find("span[name=theme]").html(app.theme.name);
                    dialog.find("span[name=tag]").html(app.theme.tag);
                    dialog.find("span[name=url] a").html(app.url);
                    dialog.find("span[name=url] a").attr('href',app.url);
                    dialog.find("img").attr('src',app.image);


                } ,'json');

                dialog.dialog( "open" );
                event.preventDefault();
            });



        });
    </script>


</head>
<body>


<c:set value="appShow" var="topMenu" scope="request"></c:set>
<jsp:include page="../../commons/top.jsp"/>


<div class="main" style="min-height: 400px; margin-top: -10px;">


    <form action="/front/front/app/list" method="get">
        <div style="padding: 20px; color: rgb(105,67,138); font-size: 14px;">首页 > 应用展示</div>


        <div>


            <input type="hidden" name="theme">

            <div style="width: 600px; margin: 0 auto 0 auto;padding-top: 0px;">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td><input type="text" name="name" class="form-control"
                                   style="width: 500px;display: inline;height: 24px;"
                                   value="${requestScope.result.pageResult.t.name}"></td>
                        <td>
                            <input type="submit"
                                   style="display: inline;margin-left: 0px; margin-top: 0px; height: 30px;"
                                   value="搜 &nbsp; 索">
                        </td>
                    </tr>
                </table>
            </div>

        </div>


        <div>
            <div style="width: 600px; float: left; padding: 8px 228px; font-size: 20px; font-weight: bold">
                找到${requestScope.result.pageResult.total}个结果
            </div>
            <div style="border-top: 1px solid rgb(205,205,205); clear: both; padding-left: 10px;padding-top: 20px;">
            </div>
        </div>


        <div>

            <div class="filter" style="border: 1px solid rgb(204,204,204);">
                <div>
                    <div class="title">主题</div>
                    <div class="content">
                        <ul>
                            <c:forEach items="${requestScope.themes}" var="theme">
                                <li><input type="checkbox" name="theme" value="${theme.id}"

                                <c:forEach items="${requestScope.theme}" var="theme1">
                                           <c:if test="${theme.id==theme1}">checked</c:if>
                                </c:forEach>
                                        >${theme.name}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <div style="margin-left: -6px;width: 162px;border-top: 1px solid rgb(204,204,204);"></div>
                <div>
                    <div class="title">平台</div>
                    <div class="content">
                        <ul>
                            <c:forEach items="${requestScope.platforms}" var="platform">
                                <li><input type="checkbox" name="platform"  value="${platform.id}"
                                        <c:forEach items="${requestScope.platform}" var="platform1">
                                          <c:if test="${platform.id==platform1}">checked</c:if>
                                        </c:forEach>
                                        >${platform.name}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>

                <div style="text-align: center;margin-top: 20px;"><input type="submit" style="background-color: rgb(102,204,0)" value="过 滤"></div>
            </div>




            <div style="width: 800px;float: left; height: auto;min-height: 500px;">

                <ul class="list">
                    <c:forEach items="${requestScope.result.pageResult.rows}" var="app">
                        <li app="${app.id}">

                            <div style="width: 220px;float: left;padding-left: 16px;">
                                <div style="text-align: center;"><img src="${app.image}" width="80" height="80"></div>
                                <div style="padding-left: 50px;font-weight: bold;">${app.name}</div>
                                <div style="padding-left: 50px;color: rgb(192,151,119);">
                                    上传者：${app.creater.username}</div>
                                <div style="padding-left: 50px;min-height: 20px;">${app.description}</div>
                                <div style="padding-left: 50px;"><a href="javascripti:void(0);">查看更多</a></div>
                            </div>


                            <div style="width: 20px; float: left;">
                                <img width="26" height="26" src="
                             <c:choose>
                                <c:when test="${app.platform.id==1}">/resources/images/app/platform/android.png</c:when>
                                <c:when test="${app.platform.id==2}">/resources/images/app/platform/ios.png</c:when>
                                <c:otherwise>
                                        /resources/images/app/platform/web.png
                                </c:otherwise>
                                </c:choose>
                            ">
                            </div>
                        </li>
                    </c:forEach>

                </ul>

            </div>
        </div>
    </form>
</div>


<div id="dialog" style="width: 400px">
   <div style="width: 80px;float: left;"><img src="" width="80" height="80"></div>
   <div style="width: 300px;float: left;">
      <div style="width: 300px;"><span name="title">腾讯QQ</span></div>
      <div style="width: 300px;">&nbsp;&nbsp;<span name="description"></span></div>
       <div style="width: 300px;"><span>系统平台：</span><span name="platform"></span></div>
       <div style="width: 300px;"><span>主题：</span><span name="theme"></span></div>
       <div style="width: 300px;"><span>标签：</span><span name="tag"></span></div>
       <div style="width: 300px;"><span>下载：</span><span name="url"><a href="#">2</a></span></div>
   </div>
</div>

<jsp:include page="../../commons/buttom.jsp"/>
</body>
</html>
